<template>
  <div class="wh hide" id="wrap" style="overflow: hidden">
    <div class="page1 page" style="position: relative">
      <div class="container" id="scroller">
        <div class="content" style="display: flex;flex-direction: column;height:100vh">
          <img style="z-index: -1;position: absolute;left: 0;right: 0;top:0;bottom: 0;width: 100vw"
               :src="`/img/background.jpg`" :onerror="defaultImg"
          >
<!--          <div style="width: 100%;height: 80px;line-height: 80px;color:rgb(255,255,208);letter-spacing: 1px;font-size: 16pt;padding-left: 10px">-->
<!--            {{logo}}-->
<!--          </div>-->
          <div style="z-index: 2;height: 80px;line-height: 80px;padding-left: 20px;font-size:14pt;display: block;width: 50vw">
<!--            <div style="color:rgb(255,255,208);font-family: '黑体';letter-spacing: 1px">{{logo}}</div>-->
          </div>
          <div id="img" style="flex: 1;height:100%;padding: 30px 20px;position: relative">
            <img :src="resultImg" alt="" style="width: 100%">

            <div :style="{top: imgWidth}" style="position: absolute;left: 0;right: 0;margin: 0 auto;color:white;font-size: 20pt;text-align: center">
              <div>{{result.attr4}}</div>
              <div style="font-size: 14pt">{{result.prizename}}</div>
            </div>

          </div>

          <div style="width: 100%;height: 200px;text-align: center;display: flex">
            <div style="flex: 1" >
              <img :src="btn3" alt="" style="width: 150px;margin: 0 10px" @click="getPrize">
            </div>
            <div style="flex: 1">
              <img :src="btn" alt="" style="width: 150px;margin: 0 10px" @click="goback">
            </div>
            <!--            <img :src="btn" class="btn btn-back" style="width: 200px;cursor: pointer" @click="goback">-->
          </div>
        </div>
      </div>
    </div>

    <!--外层的遮罩 点击事件用来关闭弹窗，isShow控制弹窗显示 隐藏的props-->
    <transition name="fade">
      <div class="fullscreen dialog-cover" v-show="showDialog" ></div>
    </transition>
    <transition name="fade">
      <div class="dialog-content " v-show="showDialog">
        <div style="width: 100vw;height: 100vh;position: relative" >
          <img style="position:absolute;width: 100%;" :src="inputImg" alt="">
          <div style="position: fixed;top: 92vw;left: 0;right: 0;text-align: center">
            <el-input style="width: 60vw;" v-model="name" placeholder="请输入姓名"></el-input>
            <el-input type="number" style="width: 60vw;margin-top: 10px" v-model="phone" placeholder="请输入电话"></el-input>
          </div>

          <img :src="btnl" style="width: 180px" alt="" class="btn_save" @click="saveInfo">
        </div>

        <img :src="close" style="width: 40px;height: 55px;position: fixed;right: 20px;top: 20px;z-index: 9999" alt="" @click="showDialog = !showDialog">
      </div>
    </transition>
  </div>
</template>

<script>
import {getbackground, receive, getByAttr2} from '@/api/api'
import btn from '@/assets/btn4.png'
import result from '@/assets/result.png'
import btn3 from '@/assets/btn3.png'
import input from '@/assets/input.png'
import btnl from '@/assets/btn5.png'
import close from '@/assets/btn13.png'
export default {
  name: "prize",
  data(){
    return{
      bgurl:process.env.VUE_APP_API_BASE,
      logo: '',
      ratiio: '',
      btn: btn,
      btn3: btn3,
      fromPath: false,
      resultImg: result,
      inputImg: input,
      imgWidth: '45%',
      showDialog: false,
      name: '',
      phone: '',
      close: close,
      btnl: btnl,
      prize: {},
      result: {},
      defaultImg: 'this.src="' + require('@/assets/MG149.jpeg') + '"',
    }
  },
  mounted() {
    // if(!this.fromPath){
    //   this.$router.push("/")
    //   return;
    // }
    this.$nextTick(()=>{
      this.setWidth()
    })
    // getbackground().then(result => {
    //   this.logo = result.data.logo
    //
    // })

    let attr2 = this.$route.query.attr2
    getByAttr2(attr2).then(result => {
      this.result = result.data.msg
    })

  },
  methods:{
    saveInfo(){
      if(!this.name || !this.phone){
        this.$alert("请输入用户信息", "嘉亿中心")
        return
      }
      if(!this.checkTel(this.phone)){
        this.$alert('电话号码输入不正确！', "嘉亿中心")
        return;
      }

      receive(this.result.attr2, this.name,this.phone).then(success=>{
        if(success.data.message){
          this.$alert(success.data.message)
          return;
        }
        this.$alert("信息登录成功！", "嘉亿中心")
        this.$router.push("/")
      })
    },
    checkTel(tel) {
      var  mobile = /^1[3456789]\d{9}$/ , phone = /^0\d{2,3}-?\d{7,8}$/;
      return  mobile.test(tel) || phone.test(tel);
    },
    getPrize(){
      // if(this.result.value) {
        this.showDialog = true
      // } else {
      //   alert("抱歉您没有中奖！")
      // }
    },
    setWidth() {
      let img =  document.getElementById('img')
      if(!img && img.offsetWidth > 0) {
        setTimeout(() => {
          this.setWidth()
        },300)
      } else {
        this.imgWidth = (img.offsetWidth * (2/3)) + 'px';
      }
    },
    goback(){
      this.$router.push('/')
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.$data.fromPath = from.path === '/'
    });
  },
}
</script>

<style scoped>
.btn-back {

  -webkit-animation: bounceInUp 1s linear both, icon 3.0s ease 1s infinite;
}
.dialog-cover {
background-color: rgba(0, 0, 0, 0.4);
}
.fullscreen {
  position: fixed;
  left: 0;right: 0;top:0;bottom: 0;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.dialog-content{
  position: fixed;
  left: 0;right: 0;top:0;bottom: 0;
}
.btn_save {
  position: absolute;
  bottom: 88px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
</style>
